<template>
  <nav id="nav" :class="{ scrolled: isScrolled }">
    <div class="container">
      <div class="brand" @click="scrollToTop">
        <div class="logo"></div>
        <b data-i18n="brand">灵犀智影</b>
      </div>
      <ul class="menu">
        <li>
          <router-link to="/" data-i18n="menu_home" :class="{ active: route.name === 'home' }"
            >首页</router-link
          >
        </li>
        <li class="has-submenu">
          <router-link
            to="/workFlow"
            :class="{ active: route.name === 'workFlow' }"
            data-i18n="menu_workflow"
            >爆款工作流</router-link
          >
        </li>
        <!-- <li class="has-submenu">
          <a href="#" data-i18n="menu_cases">案例库</a>
          <div class="submenu">
            <div>
              <a href="#">电商案例</a>
              <a href="#">品牌案例</a>
              <a href="#">教育案例</a>
            </div>
          </div>
        </li>
        <li class="has-submenu">
          <a href="#" data-i18n="menu_academy">灵犀学院</a>
          <div class="submenu">
            <div>
              <a href="#">视频教程</a>
              <a href="#">使用文档</a>
              <a href="#">最佳实践</a>
            </div>
          </div>
        </li>
        <li>
          <a href="#" data-i18n="menu_events">活动</a>
        </li>
        <li class="has-submenu">
          <a href="#" data-i18n="menu_api">API</a>
          <div class="submenu">
            <div>
              <a href="#">API 文档</a>
              <a href="#">开发者中心</a>
              <a href="#">SDK 下载</a>
            </div>
          </div>
        </li> -->
      </ul>
      <div class="actions">
        <div class="search" id="navSearch">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8" />
            <path d="M21 21l-4.35-4.35" />
          </svg>
        </div>
        <div class="search-expanded" id="navSearchExpanded">
          <input type="text" placeholder="搜索模板、功能、教程..." id="navSearchInput" />
          <button id="navSearchClose">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
        </div>
        <!-- <div class="lang" @click="toggleLangPanel">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10" />
            <path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" />
            <path d="M2 12h20M12 2v20" />
          </svg>
          <div class="lang-panel" v-show="showLangPanel">
            <div @click="changeLang('zh')" data-lang="zh">中文</div>
            <div @click="changeLang('en')" data-lang="en">English</div>
            <div @click="changeLang('es')" data-lang="es">Español</div>
          </div>
        </div> -->
        <!-- <div class="theme" id="themeToggle" @click="toggleTheme">
          <svg
            v-if="isDarkTheme"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
          </svg>
          <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="5" />
            <path
              d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
            />
          </svg>
        </div> -->

        <!-- 未登录-登录按钮 -->
        <a class="btn primary btn-ripple" href="/login" data-i18n="cta_try" v-if="!isLogin"
          >去登录</a
        >
        <!-- 已登录 -->
        <div class="userinfo" @click="toggleUserPanel" v-else>
          <span>个人中心</span>
          <!-- 个人中心弹框 -->
          <div class="userinfo-popup" v-show="showUserPanel">
            <div class="userinfo-popup-header">
              <span>个人中心</span>
              <button class="close-btn" @click.stop="toggleUserPanel">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M18 6L6 18M6 6l12 12" />
                </svg>
              </button>
            </div>
            <div class="userinfo-popup-content">
              <div class="user-avatar">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" />
              </div>
              <div class="user-details">
                <div class="user-item">
                  <span class="label">手机号：</span>
                  <span class="value">{{ userStore.userInfo.phone }}</span>
                </div>
                <div class="user-item">
                  <span class="label">账户余额：</span>
                  <span class="value">¥1,280.50</span>
                </div>
              </div>
              <button class="logout-btn" @click="handleLogout">退出登录</button>
            </div>
          </div>
        </div>
        <!-- <a class="btn primary btn-ripple" href="#" data-i18n="cta_try">立即体验</a> -->
      </div>
    </div>
  </nav>
</template>

<script setup>
import { useUserStore } from "@/store/user";
import { ref, onMounted, onUnmounted, computed } from "vue";
import AuthUtil from "@/api/member/auth";
// 获取当前页面路径 router属性
import { useRoute } from "vue-router";
const route = useRoute();
const userStore = useUserStore();
// 国际化字典
const i18n = {
  zh: {
    brand: "灵犀智影",
    menu_home: "首页",
    menu_workflow: "爆款工作流",
    menu_cases: "案例库",
    menu_academy: "灵犀学院",
    menu_events: "活动",
    menu_api: "API",
  },
  en: {
    brand: "Lingxi Smart Video",
    menu_home: "Home",
    menu_workflow: "Viral Workflows",
    menu_cases: "Case Library",
    menu_academy: "Lingxi Academy",
    menu_events: "Events",
    menu_api: "API",
  },
  es: {
    brand: "Lingxi Video Inteligente",
    menu_home: "Inicio",
    menu_workflow: "Flujos Virales",
    menu_cases: "Biblioteca de Casos",
    menu_academy: "Academia Lingxi",
    menu_events: "Eventos",
    menu_api: "API",
  },
};

// 状态变量
const isScrolled = ref(false);
const activeSection = ref("hero");
const showLangPanel = ref(false);
const showUserPanel = ref(false);
const isDarkTheme = ref(false);
const currentLang = ref(localStorage.getItem("lang") || "zh");

// 监听滚动事件，更新导航栏状态
const handleScroll = () => {
  isScrolled.value = window.scrollY > 8;

  // 更新当前活动的部分
  const sections = ["hero", "features", "how", "market", "pricing", "feedback", "faq"];
  for (const section of sections) {
    const element = document.getElementById(section);
    if (element) {
      const rect = element.getBoundingClientRect();
      if (rect.top <= 80 && rect.bottom > 80) {
        activeSection.value = section;
        break;
      }
    }
  }
};

// 切换语言面板
const toggleLangPanel = () => {
  showLangPanel.value = !showLangPanel.value;
};

// 切换用户面板
const toggleUserPanel = (e) => {
  if (e) e.stopPropagation();
  showUserPanel.value = !showUserPanel.value;
};

// 处理退出登录
const handleLogout = () => {
  AuthUtil.logout().then(() => {
    userStore.logout();
    showUserPanel.value = false;
  });
};

// 点击外部关闭用户面板
const handleClickOutside = (e) => {
  if (showUserPanel.value && !e.target.closest(".userinfo")) {
    showUserPanel.value = false;
  }
};

// 切换主题
const toggleTheme = () => {
  document.documentElement.classList.toggle("dark");
  isDarkTheme.value = document.documentElement.classList.contains("dark");
  localStorage.setItem("theme", isDarkTheme.value ? "dark" : "light");
};

// 切换语言
const changeLang = (lang) => {
  currentLang.value = lang;
  localStorage.setItem("lang", lang);
  applyLang(lang);
  showLangPanel.value = false;
};

// 应用语言
const applyLang = (lang) => {
  const dict = i18n[lang];
  if (!dict) return;

  document.querySelectorAll("[data-i18n]").forEach((el) => {
    const key = el.dataset.i18n;
    if (dict[key]) el.innerHTML = dict[key];
  });
};

// 滚动到顶部
const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};

// 判断是否登录
const isLogin = computed(() => {
  return userStore.userInfo !== null;
});

// 生命周期钩子
onMounted(() => {
  // 添加点击外部关闭用户面板的事件监听
  document.addEventListener("click", handleClickOutside);
  // 初始化主题
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme === "dark") {
    document.documentElement.classList.add("dark");
    isDarkTheme.value = true;
  }

  // 初始化语言
  applyLang(currentLang.value);

  // 添加滚动监听
  window.addEventListener("scroll", handleScroll);

  // 点击外部关闭语言面板
  document.addEventListener("click", (e) => {
    if (!e.target.closest(".lang")) {
      showLangPanel.value = false;
    }
  });

  // 初始化导航状态
  handleScroll();
});

onUnmounted(() => {
  // 移除事件监听
  window.removeEventListener("scroll", handleScroll);
  document.removeEventListener("click", handleClickOutside);
});
</script>

<style scoped>
.userinfo {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: #1e293b;
  font-weight: 500;
}

.userinfo-popup {
  z-index: 999;
  position: absolute;
  top: calc(100% + 10px);
  right: -10px;
  width: 280px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.15);
  overflow: hidden;
  animation: fadeIn 0.3s ease;
  border: 0.5px solid rgba(0, 102, 255, 0.1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.userinfo-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #dbe6ff;
}

.userinfo-popup-header span {
  font-weight: 600;
  font-size: 16px;
}

.close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: color 0.2s ease;
}

.close-btn:hover {
  color: #1e293b;
}

.close-btn svg {
  width: 16px;
  height: 16px;
}

.userinfo-popup-content {
  padding: 16px;
}

.user-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.user-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(0, 102, 255, 0.1);
}

.user-details {
  margin-bottom: 20px;
}

.user-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #dbe6ff;
}

.user-item:last-child {
  border-bottom: none;
}

.user-item .label {
  color: #64748b;
  font-size: 14px;
}

.user-item .value {
  font-weight: 500;
  color: #1e293b;
}

.logout-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #0066ff, #4da6ff, #00b3ff);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: linear-gradient(135deg, #0052cc, #3a8dff, #00a1e6);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
}
/* 导航栏样式 */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: all 0.3s ease;
  background: transparent;
  height: 60px;
  /* 导航栏高度 */
}

nav.scrolled {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 102, 255, 0.1);
  padding: 12px 0;
}

nav .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  color: #1e293b;
}

.logo {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  background: linear-gradient(135deg, #0066ff, #4da6ff, #00b3ff);
  border-radius: 8px;
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  position: relative;
  margin: 0 4px;
}

.menu li a {
  display: block;
  padding: 8px 12px;
  color: #1e293b;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.menu li a:hover,
.menu li a.active {
  color: #0066ff;
  background: rgba(0, 102, 255, 0.08);
}

.has-submenu {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 180px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 100;
  padding: 8px 0;
  border: 0.5px solid rgba(0, 102, 255, 0.1);
}

.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu div {
  display: flex;
  flex-direction: column;
}

.submenu a {
  padding: 8px 16px;
  color: #1e293b;
  text-decoration: none;
  transition: all 0.3s ease;
}

.submenu a:hover {
  background: rgba(0, 102, 255, 0.08);
  color: #0066ff;
}

.actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search,
.lang,
.theme {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search:hover,
.lang:hover,
.theme:hover {
  background: rgba(0, 102, 255, 0.08);
}

.search svg,
.lang svg,
.theme svg {
  width: 20px;
  height: 20px;
  color: #1e293b;
}

.search-expanded {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 1001;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.1);
}

.search-expanded.active {
  transform: translateY(0);
}

.search-expanded input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 0;
  font-size: 16px;
  color: #1e293b;
  outline: none;
}

.search-expanded button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #64748b;
}

.login-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #0066ff, #4da6ff, #00b3ff);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-btn:hover {
  background: linear-gradient(135deg, #0052cc, #3a8dff, #00a1e6);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.2);
}

.lang {
  position: relative;
}

.lang-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 120px;
  background: var(--bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  margin-top: 8px;
}

.lang-panel div {
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-panel div:hover {
  background: var(--hover);
  color: var(--primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.btn.primary {
  background: var(--primary);
  color: rgb(237, 87, 6);
}

.btn.primary:hover {
  background: var(--primary-dark);
}

.btn-ripple {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .menu li a {
    padding: 8px 10px;
  }
}

@media (max-width: 768px) {
  .menu {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  nav .container {
    padding: 0 16px;
  }
}
</style>
